<template>
    <div class="bookshelf">
        <van-sticky>
            <div class="top">
                <input @click="$router.push('/search?type=' + 0)" type="text" 
                placeholder="搜索书名、作者，请您少字也别输错字！">
                <div style="margin-left: 20px;" @click="$router.push('/clockBoots')">
                    <van-icon name="clock-o" color="#fff" size="20"/>
                </div>
            </div>
        </van-sticky>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="refresh"
        loading-text="检查小说更新中...">
            <div class="boots">
                <bookshelfList v-if="Book.fictionshelf.list.length > 0"/>
                <van-empty description="空空如也"  v-else>
                    <van-button round type="danger" class="bottom-button" @click="$router.push('/search')">去搜喜欢的小说</van-button>
                </van-empty>
                <br><br><br><br>
            </div>
        </van-pull-refresh>
    </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import bookshelfList from './bookshelfList.vue'
import { FictionCheckNew } from '@/api/fictionShelf'
export default {
    components : {
        bookshelfList
    },
    data() {
        return {
            refreshing : false,
        }
    },
    computed : {
        ...mapState(['Book'])
    },
    created(){
        // this.getFictionShelfList()
    },
    methods : {
        ...mapMutations(['getFictionShelfList']),

        // 下拉刷新
        onRefresh(){

            if(this.Book.fictionshelf.list.length <= 0){
                return this.$toast("先去找本喜欢的小说吧")
            }

            let self = this
            FictionCheckNew().then(r => {
                if(r.code == 200){
                    if(r.data){
                        self.getFictionShelfList(res => {
                            self.refreshing = false
                            if(res.code == 200){
                                self.$toast.success('更新了' + res.data.newFictionNum + '本小说')
                            }
                        })
                    }else {
                        self.refreshing = false
                        self.$toast.success('暂无小说更新')
                    }
                }else {
                    self.refreshing = false
                }
            }).catch(e => {
                self.refreshing = false
            })
        }
    }
}
</script>

<style scoped>
.bookshelf{
    position: relative;
    height: 100%;
    width: 100%;
    overflow-y: scroll;
}
.bookshelf::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: -1;
    height: 370px;
    background: linear-gradient(var(--bookshelfTop), #fff);;
}
.top{
  position: relative;
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f00;
}
.top input{
  width: 65%;
  height: 26px;
  padding: 0 10px;
  border-radius: 15px;
  border: 0;
}
.refresh{
    position: absolute;
    top: 60px;
    left: 0;
}
.boots{
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    background: #fff;
    width: 100vw;
    padding: 10px 0;
    min-height: calc(100vh - 130px);
}
</style>